<script setup lang="ts">
import { computed } from 'vue';
import { cloneDeep } from 'lodash-es';
import { translateRouteTitle } from '@/core/utils/i18n';
import { extractPathList, deleteChildren } from './utils/index';
import { usePermissionStoreHook } from '@/store/modules/permission';

defineOptions({
  name: 'LineTree',
});

const menusTree = cloneDeep(usePermissionStoreHook().routes);
const menusData = computed(() => {
  return deleteChildren(menusTree);
});
const expandedKeys = extractPathList(menusData.value);
console.log(111, menusData.value, expandedKeys);
const dataProps = {
  value: 'uniqueId',
  children: 'children',
};

const handleDelete = (node: any, data: any) => {
  console.log(node, data);
  ElMessageBox.confirm('确认删除该条数据？', '删除', { type: 'error' });
};
</script>

<template>
  <AppPage>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <p class="font-medium">扩展 Elemenet Plus 的树形组件包括虚拟树组件，支持连接线</p>
        </div>
      </template>

      <el-row :gutter="10" type="flex" class="p-2">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">普通树结构</div>
            </template>
            <div class="max-h-[550px] overflow-y-auto">
              <el-tree
                :data="menusData"
                :props="dataProps"
                show-checkbox
                default-expand-all
                node-key="uniqueId"
                :indent="30"
              >
                <template #default="{ node, data }">
                  <TreeLine :node="node" :showLabelLine="true">
                    <template #node-label>
                      <el-text>
                        {{ translateRouteTitle(node.data.meta?.title ?? '') }}
                      </el-text>
                    </template>
                    <template #after-node-label>
                      <el-button type="danger" text @click.stop="handleDelete(node, data)">删除</el-button>
                    </template>
                  </TreeLine>
                </template>
              </el-tree>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">虚拟树结构</div>
            </template>
            <div class="max-h-[550px] overflow-y-auto">
              <el-tree-v2
                :data="menusData"
                :props="dataProps"
                show-checkbox
                :height="550"
                :default-expanded-keys="expandedKeys"
              >
                <template v-slot:default="{ node }">
                  <TreeLine :node="node" :treeData="menusData" :showLabelLine="true" :indent="30">
                    <template v-slot:node-label>
                      <span class="text-sm">
                        {{ translateRouteTitle(node.data.meta?.title ?? '') }}
                      </span>
                    </template>
                  </TreeLine>
                </template>
              </el-tree-v2>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </AppPage>
</template>
